<template>
    <div class="language">
        <el-dropdown @command="handoffLanguage">
            <span class="el-dropdown-link">
                <el-icon class="icon"><Collection /></el-icon>
            </span>
            <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="zh" :disabled="currentLanguage === 'zh' ">中文</el-dropdown-item>
                <el-dropdown-item command="en" :disabled="currentLanguage === 'en' ">英文</el-dropdown-item>
            </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const i18n = useI18n()
//显示出那种语言,那种语言的按钮被禁用
const currentLanguage = computed(()=>{
    return i18n.locale.value 
})
const handoffLanguage = (val)=>{
    i18n.locale.value = val
    store.commit('changLang',val)
    localStorage.setItem('lang',val)
}

</script>
<style scoped lang="less">
.language{
    width: 25px;
    height: 25px;
    position: relative;
    right: 40px;
    top: 8px;
}
.icon{
    width: 25px;
    height: 25px;
    
    svg{
        width: 25px;
        height: 25px;
    }
}
</style>